<template>
  <div>
    <div style="margin: 10px 0;">
      <el-row type="flex" class="row-search" >
        <el-col :span="2"><el-button @click="toggleSelection()" style="margin-left: 10px;">取消全选</el-button></el-col>
        <el-col :span="4"><el-input v-model="deviceName" style="float:left; margin-left: 10px;  width: 200px;" suffix-icon="el-icon-search" placeholder="请输入维修设备名称："></el-input></el-col>
        <el-col :span="2"><el-button type="primary" style="margin-left: 10px;" icon="el-icon-search" @click="load">搜索</el-button></el-col>
        <el-col :span="1"><el-button type="warning"  icon="el-icon-search" @click="reset">重置</el-button></el-col>
      </el-row>
    </div>

    <div style="margin: 10px 0; ">
      <el-row type="flex" class="row-update" >
        <el-col :span="2"><el-button type="success"  size="medium" style=" margin: 10px;" icon="el-icon-circle-plus-outline" @click="handAddForm">新增</el-button></el-col>
        <el-popconfirm
            style="margin-left: 5px;"
            confirm-button-text='确定'
            cancel-button-text='取消'
            icon="el-icon-info"
            icon-color="red"
            title="您确定执行批量删除吗？"
            @confirm="bathDel()"
        >
          <el-button slot="reference" type="danger"   size="medium" style="margin: 10px;" icon="el-icon-delete" > 批量删除</el-button>
        </el-popconfirm>
        <el-col :span="2">
          <!--          <el-upload>
                      <el-button action='http://localhost:9090/user/import'  type="primary"  size="medium" style="margin: 10px;" icon="el-icon-bottom"> 导入</el-button>
                    </el-upload>-->
        </el-col>
        <!--        <el-col :span="2"><el-button type="primary"  size="medium" style="margin: 10px;" icon="el-icon-top" @click="exp"> 导出</el-button></el-col>-->
      </el-row>
    </div>

    <el-table
        :header-cell-style="{ background: '#F2F2F2', color: '#333' }"
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="mtId" label="维修单号" width="80px;" show-overflow-tooltip/>
      <el-table-column prop="deviceId" label="报修设备编号"  show-overflow-tooltip/>
      <el-table-column prop="deviceName" label="报修设备名称"  show-overflow-tooltip/>
      <el-table-column prop="mtStartTime" label="报修时间" />
      <el-table-column prop="mtCreater" label="报修人" />
      <el-table-column prop="mtLevel" label="重要级别" />
      <el-table-column prop="remark" label="备注" />
      <el-table-column prop="status" label="维修状态" />
      <el-table-column label="操作" width="400" align="center">
        <template slot-scope="scope">
<!--          <el-button type="primary" @click="handleAddUser(scope.row)" icon="el-icon-edit" size="mini">添加维修设备</el-button>-->
          <el-button type="success" @click="handleEdit(scope.row)"  size="mini">查看</el-button>
<!--          <el-button type="primary" @click="handleEdit(scope.row)" icon="el-icon-edit" size="mini">修改</el-button>-->
          <el-popconfirm
              style="margin-left: 5px;"
              confirm-button-text='确定'
              cancel-button-text='取消'
              icon="el-icon-info"
              icon-color="red"
              title="确定删除该条消息吗？"
              @confirm="handleDel(scope.row.mtId)"
          >
            <el-button type="danger" slot="reference" icon="el-icon-delete" size="mini">修理结束</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <div style="padding: 10px;">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[3, 6, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>

<!--    <el-dialog title="用户信息" :visible.sync="dialogFormVisible" width="30%">
      <el-form  :model="maintain" :rules="addRules" ref="maintainForm" label-width="80px">
        <el-form-item label="ID" >
          <el-input v-model="maintain.deviceId" autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item label="用户名" >
          <el-input v-model="maintain.deviceName" autocomplete="off"></el-input>
        </el-form-item>
        &lt;!&ndash;        <el-form-item label="唯一标识">
                  <el-select clearable v-model="form.role"  placeholder="请选择" class="selectWidth">
                    <el-option v-for="item in roles"
                               :key="item.roleName"
                               :label="item.flag"
                               :value="item.flag">
                      <span style="float: left">{{ item.flag }}</span>
                      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.roleName }}</span>
                    </el-option>
                  </el-select>
                </el-form-item>&ndash;&gt;
        &lt;!&ndash;        <el-form-item label="密码" >
                  <el-input v-model="form.password" autocomplete="off"></el-input>
                </el-form-item>&ndash;&gt;

        <el-form-item label="类型" >
          <el-input v-model="form.type" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-row>
          <el-col :span="12"><el-button @click="dialogFormVisible = false">取 消</el-button></el-col>
          <el-col :span="6"><el-button type="primary" @click="save">确 定</el-button></el-col>
        </el-row>
      </div>
    </el-dialog>-->

    <el-dialog title="登记维修设备" :visible.sync="addFormVisible" width="60%">
      <el-form :model="maintain" :rules="addRules" ref="addForm" label-width="100px">
<!--        <el-form-item label-width="0">
          <el-col :span="3">维修表单编号</el-col>
          <el-col :span="10">
            <el-input v-model="maintain.mtId" autocomplete="off" :disabled="isRead"></el-input>
          </el-col>
        </el-form-item>-->
<!--        设备id-->
        <el-form-item label-width="0">
          <el-col :span="3">设备id</el-col>
          <el-col :span="9">
            <el-select clearable v-model="maintain.deviceId"  placeholder="请选择" class="selectWidth">
              <el-option v-for="item in devices"
                         :key="item.name"
                         :label="item.id"
                         :value="item.id">
                <span style="float: left">{{ item.id }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.name }}</span>
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="3">设备名称</el-col>
          <el-col :span="9">
            <el-select clearable v-model="maintain.deviceName"  placeholder="请选择" class="selectWidth">
              <el-option v-for="item in devices"
                         :key="item.id"
                         :label="item.name"
                         :value="item.name">
                <span style="float: left">{{ item.name }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.id }}</span>
              </el-option>
            </el-select>
          </el-col>
        </el-form-item>

        <!--维修时间-->
        <el-form-item label-width="0">
          <el-col  :span="3">报修时间</el-col>
          <el-col :span="10">
            <el-date-picker type="date" placeholder="选择日期" v-model="maintain.mtStartTime" style="width: 100%;" :disabled="isRead"></el-date-picker>
          </el-col>
          <el-col class="line" :span="1">-</el-col>
          <el-col :span="10">
            <el-time-picker placeholder="选择时间" v-model="maintain.mtStartTime" style="width: 100%;" :disabled="isRead"></el-time-picker>
          </el-col>
        </el-form-item>

        <el-form-item label-width="0">
          <el-col :span="3">报修人姓名</el-col>
          <el-col :span="10">
            <el-select clearable v-model="maintain.mtCreater"  placeholder="请选择" class="selectWidth">
              <el-option v-for="item in users"
                         :key="item.id"
                         :label="item.userName"
                         :value="item.userName">
                <span style="float: left">{{ item.userName }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.id }}</span>
              </el-option>
            </el-select>
          </el-col>
        </el-form-item>

        <el-form-item label-width="0">
          <el-col :span="3">修理状态</el-col>
          <el-col :span="10">
            <el-select clearable v-model="maintain.status" placeholder="请选择">
              <el-option
                  v-for="item in statusOptions"
                  :key="item.key"
                  :label="item.label"
                  :value="item.value">
                <span style="float: left">{{ item.label }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.key }}</span>
              </el-option>
            </el-select>
          </el-col>
        </el-form-item>

        <el-form-item label-width="0" >
          <el-col :span="3">备注</el-col>
          <el-col :span="9" >
            <el-input type="textarea" v-model="maintain.remark" autocomplete="off" ></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="formAdd">确 定</el-button>
      </div>
    </el-dialog>



  </div>
</template>

<script>
export default {
  name: "Maintain",
  data(){
    return{
      maintain:{
        mtId: '',
        deviceId: '',
        deviceName: '',
        mtStartTime: '',
        mtCreater: '',
        mtLevel: '',
        remark: '',
        status: '',
      },
      statusOptions: [{
        key: '未修理',
        value: 0,
        label: 0
      }, {
        key: '修理成功',
        value: 1,
        label: 1
      }],
      addRules:{
      },

      form: {},
      pageNum: 1,
      pageSize: 3,
      deviceName: '',
      tableData: [],
      total: 0,

      dialogFormVisible: false,
      addFormVisible:false,
      multipleSelection: [],
      devices:[],
      users:[],

      /*input: '',*/

      formLabelWidth: '60px',

      //只读
      isRead :false

    }
  },
  created() {
    this.load()
  },
  methods:{
    /*页面get请求*/
    load(){
      this.request.get("/maintain/page",{
        params: {
          pageNum:  this.pageNum,
          pageSize: this.pageSize,
          deviceName: this.deviceName,
        }
      }).then(res => {
        /*console.log(res)*/
        this.tableData = res.data.records
        /*console.log(res.data)*/
        this.total = res.data.total
      })

      this.request.get("/maintain/device/list").then(res => {
        this.devices = res.data
      })

      this.request.get("/maintain/user/list").then(res => {
        this.users = res.data
      })

    },
    /*重置按钮事件*/
    reset(){
      //重置搜索框
      this.deviceName = ""
      this.load()
    },


    //新增页面弹窗
    handAddForm(){
      this.isRead = false
      this.addFormVisible =true
      this.maintain = {}
    },
    /*新增弹窗表单提交*/
    formAdd(){


      this.request.post("/maintain/save",this.maintain)
          .then(res => {
            //若果返回结果为true
            if(res.data){
              this.$message.success("保存成功")
              this.addFormVisible=false
              this.load()
            }else {
              this.$message.error("保存失败")
            }
          })


    },

    handleDel(mtId){
      this.request.delete('/maintain/' + mtId).then(res => {
        if(res.code === '200'){
          this.$message.success("删除成功")
          this.load()
        }else {
          this.$message.error("删除失败")
        }
      })
    },
    //批量删除
    bathDel(){
      //map键值对绑定multipleSelection中的id值  [{},{},{}] => [multipleItem.1.id,..2.id,..3.id,..4]
      let ids = this.multipleSelection.map(v => v.mtId)
      this.request.post("/maintain/bath/del",ids).then(res => {
        if(res.code === '200'){
          this.$message.success("批量删除成功")
          this.load()
        }else {
          this.$message.error("批量删除失败")
        }
      })
    },

    handleEdit(row){
      this.isRead = true
      this.maintain = row
      this.addFormVisible = true
    },



    //新增其他表
    /*handleAddUser(row){
      this.form = row
      this.form.pid = row.id
      this.addUserVisible = true
    },*/


    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },


    handleAdd(){
      //新增
      this.dialogFormVisible = true
      this.form = {}
    },

    //保存
   /* save(){
      this.request.post("/maintain/save",this.form)
          .then(res => {
            //若果返回结果为true
            if(res.data){
              this.$message.success("保存成功")
              this.dialogFormVisible = false
              this.addFormVisible=false
              this.load()
            }else {
              this.$message.error("保存失败")
            }
          })
    },*/
    //编辑
    /*handleEdit(row){
      this.maintain = row
      this.dialogFormVisible = true
    },*/



    handleSelectionChange(val) {
      /*console.log(this.multipleSelection)*/
      this.multipleSelection = val
    },


    handleSizeChange(pageSize){
      this.pageSize = pageSize
      /*console.log(pageSize)*/
      this.load()
    },
    handleCurrentChange(pageNum){
      this.pageNum = pageNum
      /*console.log(pageNum)*/
      this.load()
    },
    /*exp() {
      window.open("http://localhost:9090/user/export")
    }*/
  }

}
</script>

<style scoped>
.el-header {
  background-color: #ffffff;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

.selectWidth{
  width: 100% !important;
}
</style>